<template>
	<view class="LotteryDraw">
		<view class="rotate" :style="{transform:rotateZ,transitionDuration:'5S',transitionTimingFunction:'ease-in-out'}">
			<image class="image" :src="roundUrl"></image>
			<block v-if="players && players.length">
				<block v-for="(player , index) in players" :key="index">
					<image :src="player.user.avatar" v-if="player.user" :style="{top:player.top,left:player.left,transform:player.ratz}"
					 class="player"></image>
					<image src="../../static/missing-face.png" v-else :style="{top:player.top,left:player.left,transform:player.ratz}"
					 class="player"></image>
				</block>
			</block>

		</view>
		<view class="start" :style=" {background:pointerUrl}">

			<image class="image" :src="StartUrl"></image>
		</view>
		<view class="oprate">
			<button type="default" class="lotteryBtn" @click="toInvited" :style="{backgroundColor:isEnough?'#8a8a8a':'#ffbe04'}"
			 size="mini">邀请好友</button>
			<!-- <button type="default" class="lotteryBtn" :style="{backgroundColor:!isEnough?'#8a8a8a':'#ffbe04'}" size="mini"
			 @click.once="getLotteryDraw">开始抽奖</button> -->
		</view>
		<modal ref="invited" title="邀请拼团" width="500rpx">
			<view class="inputContain">
				<input type="number" class="phoneInput" @input="phoneChange" placeholder="你好友的手机号码" :value="invitedPhone" />
			</view>
			<view class="inputContain">
				<view class="paybtn" @click="doInvited">
					邀请
				</view>
			</view>
		</modal>
	</view>
</template>
<script>
	import modal from "@/components/myModal/myModal.vue"
	import {
		userInfo
	} from "@/common/loadUserInfo.js"
	export default {
		components: {
			modal
		},
		props: {
			pinId: {
				type: Number
			},
			lazy: {
				type: Number,
				default: 5
			},
			result: { //中奖
				type: Number,
				default: 5
			},
			roundUrl: { //转盘图片地址
				type: String,
				default () {
					return "../../static/lottery/round.png"
				}
			},
			StartUrl: { // 指针图片地址
				type: String,
				default () {
					return "../../static/lottery/Start.png"
				}
			},
			getData: { //获取数据
				type: Function,
				require: true
			},
			deg: {
				type: Number, //默认60 则360/60=6 说明奖项为6项
				default: 60
			},
			getPrize: {
				type: Function,
				require: true
			},
			userInner: {
				type: Array,
				require: false
			}
		},
		watch: {
			userInner(val) {
				console.log('watch')
				if (val && val.length > 0) {
					this.setUserAvanter(val)
					if (val.length == 11) {
						this.isEnough = true
						this.$api.msg('抽奖马上开始！')
						setTimeout(() => {
							this.getLotteryDraw()
						}, 800)
					}
				}
			}
		},
		data() {
			return {
				invitedPhone: '',
				userDetail: null,
				defaultAvanter: require('../../static/missing-face.png'),
				bankPlayer: require('../../static/missing-face.png'),
				isEnough: false,
				rotateZ: "",
				currentLocation: '0', //记录当前位置
				url: "",
				pageBg: '',
				pointerUrl: "",
				players: [{
					top: '78rpx',
					left: '311rpx'
				}, {
					top: '120rpx',
					left: '435rpx'
				}, {
					top: '214rpx',
					left: '520rpx'
				}, {
					top: '337rpx',
					left: '538rpx'
				}, {
					top: '455rpx',
					left: '485rpx'
				}, {
					top: '524rpx',
					left: '374rpx'
				}, {
					top: '524rpx',
					left: '246rpx'
				}, {
					top: '452rpx',
					left: '145rpx'
				}, {
					top: '340rpx',
					left: '89rpx'
				}, {
					top: '213rpx',
					left: '107rpx'
				}, {
					top: '122rpx',
					left: '192rpx'
				}]
			}
		},
		created: function() {
			this.userDetail = uni.getStorageSync('userDetail')
			if (!this.userDetail) {
				let that = this
				userInfo({
					success: (res) => {
						console.log(res.data)
						that.userDetail = res.data.userinfo
						uni.setStorageSync('userDetail', that.userDetail)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}

		},
		mounted() {
			this.setUserAvanter(this.userInner)
		},
		methods: {
			toInvited() {
				if (this.isEnough) {
					this.$api.msg("当前拼团人数已满！")
					return
				} else {
					this.$refs.invited.open()
				}

			},
			phoneChange(e) {
				this.invitedPhone = e.detail.value
			},
			doInvited() {
				let phoneReg = /^1[3456789]\d{9}$/
				if (!phoneReg.test(this.invitedPhone)) {
					this.$api.msg('请输入正确的手机号码！')
					return
				}else{
					if(this.invitedPhone==this.userDetail.userPhone){
						this.$api.msg('您不能邀请自己!')
						return
					}
				}
				let that = this
				that.$Request.request('/api/pintuan/invitePintuan', 'POST', {
					pintuanId: that.pinId,
					inviteUserId: that.userDetail.userId,
					phone: that.invitedPhone
				}).then(res => {
					console.log(res)
					that.$api.msg('邀请成功！')
					that.invitedPhone=""
					that.$refs.invited.close()
				}).catch(err => {
					console.log(err)
					that.invitedPhone=""
					that.$refs.invited.close()
				})
			},
			setUserAvanter(users) {
				for (let i in this.players) {
					let player = this.players[i]
					if (users && users.length - 1 >= i) {
						player.user = users[i]
						player.user.avatar = player.user.avatar ? player.user.avatar : this.defaultAvanter
					} else {
						player.user = {
							avatar: this.bankPlayer
						}
					}
					player.ratz = `rotateZ(${this.deg*i}deg)`
					this.players.splice(i, 1, player)
				}
			},
			//图片转动
			lotteryDrew() {
				let numdeg = (this.result * 360 / 11) + (360 * 11)
				console.log(numdeg)
				this.rotateZ = "rotateZ(" + -numdeg + "deg)"; //轮盘转动
				setTimeout(() => {
					this.$emit('getPrize', numdeg); //返回中奖结果
				}, this.lazy * 1000)
			},
			getLotteryDraw() {
				this.$emit('getData'); //获取数据
				console.log(this.result)
				setTimeout(() => {
					if (this.result) {
						this.lotteryDrew();
					} else {
						uni.showToast({
							title: "当前没有中奖结果",
							icon: "none",
							duration: 2000
						});
					}
				}, 50)
			}
		}
	}
</script>
<style lang="scss">
	.inputContain {
		height: 110rpx;
		@extend %flexAlCenter;

		.phoneInput {
			background-color: #F8F8F8;
			width: 80%;
			height: 60rpx;
		}

		.paybtn {
			background-color: $themColor;
			border-radius: 8rpx;
			padding: 0 26rpx;
			@include textCenter(55rpx);
			color: #fff;
			letter-spacing: 0.2em;
		}
	}

	.LotteryDraw {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		height: 800rpx;
		width: 700rpx;
		position: relative;

		.oprate {
			height: 100rpx;
			@extend %flexBetw;

			.lotteryBtn {
				height: 60rpx !important;
				line-height: 60rpx !important;
				color: #fff;
			}
		}

		.rotate {
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			height: 700rpx;
			background-size: 100%;
			position: relative;
			transform: rotateZ(360deg);
			transform-origin: center left bottom;
			-webkit-transform-origin: center left bottom;
			transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);

			.image {
				height: 700rpx;
				width: 700rpx;
			}

			.player {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				position: absolute;
				top: 100rpx;
				left: 100rpx;
			}
		}

		.start {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 300rpx;
			height: 300rpx;
			padding-top: 70rpx;
			text-align: center;
			font-weight: bold;
			cursor: pointer;
			color: #fff;
			background-size: 100% !important;
			transform: translate(-50%, -65%) rotateZ(360deg);
			transform-origin: center left bottom;
			-webkit-transform-origin: center left bottom;
			transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);

			/* background:url("../../static/components/Start.png") no-repeat;*/
			.image {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 999;
				width: 300rpx;
				height: 300rpx;
				margin: 0 auto;
			}

			.text {
				position: absolute;
				top: 82rpx;
				left: 10rpx;
				z-index: 1000;
				width: 100%;
				height: 100%;
				margin: 0 auto;
				font-size: 32rpx;
			}
		}
	}
</style>
